<template>
  <div class="container">
    <el-card>
      <!-- 新增试题 -->
      <div class="head_que">
        <span class="text">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <el-form :model="questionForm" ref="questionRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" label-width="80px">
              <el-select
                placeholder="请选择"
                @focus="getSub"
                v-model="questionForm.subjectID"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="80px">
              <el-select
                placeholder="请选择"
                v-model="questionForm.catalogID"
                @focus="getDiff"
              >
                <el-option
                  v-for="item in catalogList"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" label-width="80px">
              <el-select
                placeholder="请选择"
                v-model="questionForm.tags"
                @focus="getTag"
              >
                <el-option
                  v-for="item in tagsList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" label-width="80px">
              <el-input
                style="width: 200px"
                v-model="questionForm.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" label-width="80px">
              <el-select
                placeholder="请选择"
                v-model="questionForm.questionType"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" label-width="80px">
              <el-select placeholder="请选择" v-model="questionForm.difficulty">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" label-width="80px">
              <el-select placeholder="请选择" v-model="questionForm.direction">
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" label-width="80px">
              <el-select
                placeholder="请选择"
                v-model="questionForm.creatorID"
                @focus="getUser"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" label-width="80px">
              <el-select placeholder="请选择" v-model="questionForm.remarks" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" label-width="80px">
              <el-input
                placeholder="请选择"
                v-model="questionForm.shortName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" label-width="80px">
              <el-select
                placeholder="请选择"
                v-model="questionForm.province"
                style="width: 100px; margin-right: 10px"
                @focus="getProv"
              >
                <el-option
                  v-for="item in provList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                v-model="questionForm.city"
                style="width: 100px"
                @focus="getCity"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display: flex; justify-content: end">
            <el-button size="small" @click="clearFn">清除</el-button>
            <el-button type="primary" size="small" @click="searchFn"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form >
      <!-- 提示文案 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      <!-- 表格 -->
      <QuestionsTable
        ref="searchRef"
        :total.sync="total"
        :questionForm="questionForm"
      />
    </el-card>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
import { list as disList } from '../../api/hmmm/directorys'
import { list as tagList } from '../../api/hmmm/tags'
import { list as userList } from '../../api/base/users'
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'
import QuestionsTable from '../components/qusertions-table.vue'
export default {
  data () {
    return {
      questionForm: {
        subjectID: null,
        catalogID: null,
        difficulty: null,
        tags: null,
        keyword: null,
        questionType: null,
        direction: null,
        creatorID: null,
        remarks: null,
        city: null,
        province: null,
        shortName: null
      },
      subjectList: [],
      catalogList: [],
      tagsList: [],
      userList: [],
      provList: [],
      cityList: [],
      questionType, // 试题类型
      difficulty, // 试题难度
      direction, // 方向
      total: 0
    }
  },
  components: {
    QuestionsTable
  },
  methods: {
    // 搜索
    async searchFn () {
      this.$refs.searchRef.questObj.page = 1
      await this.$refs.searchRef.getQuestions()
    },
    // 清空
    async clearFn () {
      this.$refs.questionRef.resetFields()
      this.questionForm = {
        subjectID: null,
        catalogID: null,
        difficulty: null,
        tags: null,
        keyword: null,
        questionType: null,
        direction: null,
        creatorID: null,
        remarks: null,
        city: null,
        province: null,
        shortName: null
      }
    },
    // 学科
    async getSub () {
      const { data } = await simple()
      console.log(data)
      this.subjectList = data
    },
    // 目录
    async getDiff () {
      if (this.questionForm.subjectID.length !== 0) {
        const { data } = await disList(this.questionForm)
        this.catalogList = data.items
        console.log(this.catalogList)
      } else {
        this.catalogList = []
      }
    },
    // 标签
    async getTag () {
      if (this.questionForm.subjectID.length !== 0) {
        const { data } = await tagList(this.questionForm)
        console.log(data)
        this.tagsList = data.items
      } else {
        this.tagsList = []
      }
    },
    // 录入人
    async getUser () {
      const { data } = await userList()
      console.log(data)
      this.userList = data.list
    },
    // 城市
    getProv () {
      this.provList = provinces()
    },
    // 省份
    getCity () {
      if (this.questionForm.province !== 0) {
        this.cityList = citys(this.questionForm.province)
      } else {
        this.cityList = []
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 0 10px;
  margin-top: 10px;
  .el-card__body {
    padding: 20px;
    .head_que {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      .text {
        font-size: 12px;
        color: pink;
      }
    }
    .el-form {
      font-weight: 700;
      .el-form-item__label {
        font-size: 16px !important;
      }
    }
    .el-alert {
      margin-bottom: 15px;
    }
  }
}
</style>
